<template>
    <div>
        <a-alert message="考生报考信息" type="info"  style="margin-bottom:20px;" />
        <a-form :form="form" >
            <a-row :gutter="48" style="width:100%">
          <a-col :md="20" :sm="24">
              <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="证件类型"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="证件号"
                    >
                        <a-input  v-decorator="[
                        'zjh',
                        {
                            rules: [{ required: true, message: '请输入证件号!' }],
                        }
                        ]" :disabled="disabledStop" />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="现役军人"
                    >
                        <a-select v-decorator="['xyjr',
                        {
                            rules: [{ required: true, message: '请选择现役军人!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="录取后档案和工资关系"
                    >
                        <a-select v-decorator="['lqhdahgzgx',
                        {
                            rules: [{ required: true, message: '请选择录取后档案和工资关系!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="报考类别"
                    >
                        <a-select v-decorator="['bklb',
                        {
                            rules: [{ required: true, message: '请选择报考类别!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="定向单位名称"
                    >
                        <a-input  v-decorator="[
                        'dxdwmc',
                        {
                            rules: [{ required: true, message: '请输入定向单位名称!' }],
                        }
                        ]" :disabled="disabledStop" />
                    </a-form-item>
                </a-col>
                <a-col :lg="16" :md="24" :sm="24">
                <a-form-item
                    label="定向单位所在地"
                >
                <a-row :gutter="0">
                    <a-col :md="8" :sm="8">
                        <a-select v-decorator="['dxdwszd',
                        {
                            rules: [{ required: true, message: '请选择定向单位所在地!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-select v-decorator="['dxdwszdp',
                        {
                            rules: [{ required: true, message: '请选择定向单位所在地!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-col>
                    <a-col :md="8" :sm="8">
                        <a-select v-decorator="['dxdwszdc',
                        {
                            rules: [{ required: true, message: '请选择定向单位所在地!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-col>
                </a-row>
                </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="报考院系"
                    >
                        <a-select v-decorator="['bkyx',
                        {
                            rules: [{ required: true, message: '请选择报考院系!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="报考专业"
                    >
                        <a-select v-decorator="['bkzy',
                        {
                            rules: [{ required: true, message: '请选择报考专业!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="研究方向"
                    >
                        <a-select v-decorator="['yjfx',
                        {
                            rules: [{ required: true, message: '请选择研究方向!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="报考导师"
                    >
                        <a-select v-decorator="['bkds',
                        {
                            rules: [{ required: true, message: '请选择报考导师!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="外国语名称"
                    >
                        <a-select v-decorator="['wgymc',
                        {
                            rules: [{ required: true, message: '请选择外国语名称!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="应届生"
                    >
                    <a-switch v-decorator="['yjs',
                        {
                            rules: [{ required: true, message: '请选择是否应届生!' }],
                        }]" :disabled="disabledStop" />
                        是否应届生
                    </a-form-item>
                </a-col>
                <a-col :lg="24" :md="24" :sm="24">
                    <a-form-item
                        label="外国语是否免试"
                    >
                    <a-switch v-decorator="['wgysfms',
                        {
                            rules: [{ required: true, message: '请选择是否外国语是否免试!' }],
                        }]" :disabled="disabledStop" />
                        已参加大学博士入学外语考试并且成绩合格，申请免试
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="有何种外语资格证明"
                    >
                        <a-select v-decorator="['yhzwyzgzm',
                        {
                            rules: [{ required: true, message: '请选择有何种外语资格证明!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="外语资格证明书编号"
                    >
                        <a-input  v-decorator="[
                        'wyzgzmsbh',
                        {
                            rules: [{ required: true, message: '请输入外语资格证明书编号!' }],
                        }
                        ]" :disabled="disabledStop" />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="注册学号"
                    >
                        <a-input  v-decorator="[
                        'zcxh',
                        {
                            rules: [{ required: true, message: '请输入证件号!' }],
                        }
                        ]" :disabled="disabledStop" />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="职称"
                    >
                        <a-select v-decorator="['zc',
                        {
                            rules: [{ required: true, message: '请选择最后学历!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="业务课一"
                    >
                        <a-select v-decorator="['ywky',
                        {
                            rules: [{ required: true, message: '请选择业务课一!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="业务课二"
                    >
                        <a-select v-decorator="['ywke',
                        {
                            rules: [{ required: true, message: '请选择业务课二!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="招生年度"
                    >
                        <a-select v-decorator="['zsnd',
                        {
                            rules: [{ required: true, message: '请选择最后学历!' }],
                        }]" :disabled="disabledStop" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="12" :md="12" :sm="24">
                    <a-form-item
                        label="本校在校职工"
                    >
                        <a-switch v-decorator="['bxzxzg',
                        {
                            rules: [{ required: true, message: '请选择是否本校在校职工!' }],
                        }]" :disabled="disabledStop" />
                        是否本校在职职工
                    </a-form-item>
                </a-col>
                <a-col :lg="18" :md="18" :sm="24">
                    <a-form-item
                        label="政治理论加试"
                    >
                    <a-switch v-decorator="['zzlrjs',
                        {
                            rules: [{ required: true, message: '请选择是否政治理论加试!' }],
                        }]" :disabled="disabledStop" />
                        是否参加政治理论加试(如果无硕士学位则必选，否则不选)
                    </a-form-item>
                </a-col>
          </a-col>
          <a-col :md="4" :sm="24">
              <a-form-item
                label=""
              >
              <a-upload
                name="avatar"
                style="width:80%"
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                action="//jsonplaceholder.typicode.com/posts/"
                :beforeUpload="beforeUpload"
                @change="handleChange"
              >
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                    <a-icon :type="loading ? 'loading' : 'plus'" />
                    <div class="ant-upload-text">Upload</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
      </a-row>
        </a-form>
    </div>
</template>

<script>
import { mapState } from 'vuex'

const selectArr = ['TYPE0126', 'TYPE0075', 'TYPE0125', 'TYPE0072']

function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

export default {
  props: {
    confirmHandleVisiable: {
      default: false
    },
    info: {
      default: () => ({})
    },
    // 是否禁止编辑
    disabledStop: {
      default: true
    }
  },
  data () {
    return {
      loading: false,
      imageUrl: '',
      selectMenu: {
        yx: [] // 院系
      }
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo,
      TYPE0321: state => state.app['TYPE0321'], // 是否在岗
      TYPE0126: state => state.app['TYPE0126'], // 年级
      TYPE0011: state => state.app['TYPE0011'] // 性别
    })
  },
  created () {
    this.initSelectMenu()
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
    for (let key in this.info) {
      this.form.getFieldDecorator(key, {initialValue: this.info[key]})
    }
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yx: res[0].data
        }
      })
    },
    // 关闭
    onClose () {
      this.$emit('close')
    },
    // 输出当前数据
    GetInfo () {
      return this.form.getFieldsValue()
    },
    // 改变时间
    handleDateChange () {

    },
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="less">
.fullscreen{
    .ant-drawer-wrapper-body{
        height: 100%;
        overflow: auto;
    }
}
</style>
